<template>
  <div>
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="pink"
      @change="onChange"
    >
      <van-swipe-item v-for="item in bannerlist" :key="item.id">
        <img :src="item.img" />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/4</div>
      </template>
    </van-swipe>
  </div>
</template>

<script>
import { getbanner } from "@/api/home";
export default {
  data() {
    return {
      bannerlist: [],
      current: 0,
    };
  },
  created() {
    getbanner().then((res) => {
      this.bannerlist = res.data;
      console.log(this.bannerlist);
    });
  },
  methods: {
    onChange(index) {
      console.log(index);
      this.current = index;
    },
  },
};
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  border-radius: 0.625rem;
  overflow: hidden;
}
.my-swipe {
  height: 10rem;
  margin-top: 0.25rem;
}
img {
  width: 100%;
  height: 100%;
}

.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
  color: white;
}
</style>